import { selectTeamLeaveDetail } from "@/lib/features/team/teamSlice"
import { useAppSelector } from "@/lib/hooks"
import { Team } from "@/type/team"
import { unicodeToEmoji } from "@/utils/randomemoji"
import { Accordion, AccordionItem, Button, Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Listbox, ListboxItem, ScrollShadow } from "@nextui-org/react"
import { redirect, RedirectType } from "next/navigation"


const LeaveTeam = ({ isOpen, onClose }: { isOpen: boolean, onClose: () => void }) => {

    const { leaveTeam } = useAppSelector(selectTeamLeaveDetail)??{}


    return (
        <>
            <Drawer isOpen={isOpen} onClose={onClose}
                backdrop="blur"
                size="xs"
                motionProps={{
                    variants: {
                        enter: {
                            opacity: 1,
                            x: 0,
                            transition: {
                                duration: 0.3
                            }
                        },
                        exit: {
                            x: 100,
                            opacity: 0,
                            transition: {
                                duration: 0.3
                            }
                        },
                    },
                }}>
                <DrawerContent className="text-white">
                    <>
                        <DrawerHeader className="flex flex-col gap-1">Leave Team</DrawerHeader>
                        <DrawerBody>
                            <ScrollShadow size={50} offset={60}>
                                <div className="w-full max-h-max  px-1 py-2">
                                    <Listbox
                                        items={leaveTeam}
                                        className="h-full"
                                        selectionMode="none"
                                        variant="flat"
                                    >
                                        {(item: Team) => (
                                            <ListboxItem key={item.team_id} textValue={item.team_name} showDivider
                                                classNames={{ "wrapper": "" }}
                                            >
                                                <div className="flex gap-2 items-center">
                                                    <Button onPress={() => redirect(`/team/dashboard/${item.team_id}`, RedirectType.push)} isIconOnly color="secondary" size="md" radius="md"><span className="text-3xl">{unicodeToEmoji(item.emoji as number)}</span></Button>
                                                    <Accordion>
                                                        <AccordionItem
                                                            key="1"
                                                            subtitle={`TeamName: ${item.team_name}`}
                                                            title={`TeamId：${item.team_id} `}
                                                        >
                                                        </AccordionItem>
                                                    </Accordion>
                                                </div>
                                            </ListboxItem>
                                        )}
                                    </Listbox>
                                </div>
                            </ScrollShadow>

                        </DrawerBody>
                        <DrawerFooter>
                            {/* <Button color="danger" variant="light" onPress={onClose}>
                                    Close
                                </Button> */}
                        </DrawerFooter>
                    </>
                </DrawerContent>
            </Drawer>
        </>
    )
}

export default LeaveTeam